<template>
  <uv-input
    ref="inputRef"
    :placeholder="placeholder"
    :fontSize="fontSize"
    border="bottom"
    :value="inputValue"
    @input="onInput"
  />
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  placeholder: { type: String, default: '请输入数字' },
  fontSize: { type: String, default: '44rpx' },
  mode: { type: String, default: 'integer' } // 'integer' 或 'decimal2'
})

const emit = defineEmits(['update:modelValue'])

const inputValue = ref(props.modelValue)
const inputRef = ref(null)

// 监听外部 v-model 更新
watch(() => props.modelValue, (val) => {
  inputValue.value = val
})

// 小程序 / H5 / App 通用处理
onMounted(() => {
  nextTick(() => {
    const component = inputRef.value
    if (component?.setFormatter) {
      component.setFormatter((val) => formatValue(val))
    }
  })
})

function formatValue(val) {
  if (!val) return ''
  if (props.mode === 'integer') {
	  console.log('--integer--')
    // 只保留整数
    return val.replace(/\..*$/g, '').replace(/\D/g, '')
  } else {
	  
	    // 只允许数字和小数点
	    val = val.replace(/[^\d.]/g, '')
	    // 只保留第一个小数点
	    const firstDotIndex = val.indexOf('.')
	    if (firstDotIndex >= 0) {
	      // 小数点前
	      let intPart = val.slice(0, firstDotIndex)
	      // 小数点后，最多两位
	      let decimalPart = val.slice(firstDotIndex + 1).replace(/\./g, '').slice(0, 2)
	      val = intPart + '.' + decimalPart
	    }
	    return val
  }
  return val
}

function onInput(e) {
  let val = e.detail?.value ?? e
  if (!val) {
    inputValue.value = ''
    emit('update:modelValue', '')
    return
  }

  val = formatValue(val)
  inputValue.value = val
  emit('update:modelValue', val)
}
</script>
